<template>
  <div class="page">
    <div class="gva-card-box">
      <div class="gva-card gva-top-card">
        <div class="gva-top-card-left">
          <div class="gva-top-card-left-title">
            早安，管理员，请开始一天的工作吧
          </div>
          <div class="gva-top-card-left-dot">
            今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。
          </div>
          <div class="gva-top-card-left-rows">
            <a-row class="mb20">
              <a-col :span="8" :xs="24" :sm="8">
                <div class="flex-center">
                  <i class="dasboard-icon" />
                  今日流量 (1231231)
                </div>
              </a-col>
              <a-col :span="8" :xs="24" :sm="8">
                <div class="flex-center">
                  <i class="dasboard-icon" />
                  总用户数 (24001)
                </div>
              </a-col>
              <a-col :span="8" :xs="24" :sm="8">
                <div class="flex-center">
                  <i class="dasboard-icon" />
                  好评率 (99%)
                </div>
              </a-col>
            </a-row>

            <div class="flex middle">
              <li v-for="(card, key) in toolCards" :key="key" class="quick-entrance-items">
                <div class="quick-entrance-item" @click="toTarget(card.name)">
                  <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
                    <i>
                      <component :is="card.icon" :style="{ color: card.color }" />
                    </i>
                  </div>
                  <p>{{ card.label }}</p>
                </div>
              </li>
            </div>
          </div>
        </div>
        <img src="../img/dashboard.png" class="gva-top-card-right" alt>
      </div>
    </div>

    <div class="gva-card-box">
      <div class="gva-card">
        <div class="card-header">
          <span>数据统计</span>
        </div>
        <div class="echart-box">
          <a-row :gutter="20">
            <a-col :xs="24" :sm="18">
              <div class="dashboard-line-box">
                <div class="l bold">访问趋势</div>
                <echarts-line :height="300" :chart-data="incomes" />
              </div>
            </a-col>
            <a-col :xs="24" :sm="6">
              <dashboard-table />
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import echartsLine from "./componments/echartsLine.vue";
import dashboardTable from "./componments/dashboardTable.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const incomes = {
  legend: "",
  x: ["2015", "2016", "2017", "2018", "2019", "2020"],
  y: [[555, 896, 1935, 2922, 4508, 5000]],
};
const toolCards = ref([
  {
    label: "用户管理",
    icon: "monitor",
    name: "user",
    color: "#ff9c6e",
    bg: "rgba(255, 156, 110,.3)",
  },
  {
    label: "角色管理",
    icon: "setting",
    name: "authority",
    color: "#69c0ff",
    bg: "rgba(105, 192, 255,.3)",
  },
  {
    label: "菜单管理",
    icon: "menu",
    name: "menu",
    color: "#b37feb",
    bg: "rgba(179, 127, 235,.3)",
  },
  {
    label: "关于我们",
    icon: "user",
    name: "about",
    color: "#5cdbd3",
    bg: "rgba(92, 219, 211,.3)",
  },
]);

const router = useRouter();

const toTarget = (name: string) => {
  router.push({ name });
};
</script>

<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  align-items: center;
}

.page {
  .gva-card-box {
    margin-bottom: 12px;
  }

  .gva-card {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px;
    height: auto;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: none;
    border: none;
  }

  .gva-top-card {
    height: 260px;
    @include flex-center;
    justify-content: space-between;
    color: #777;

    &-left {
      height: 100%;
      display: flex;
      flex-direction: column;

      &-title {
        font-size: 22px;
        color: #343844;
      }

      &-dot {
        font-size: 14px;
        color: #6b7687;
        margin-top: 24px;
      }

      &-rows {
        // margin-top: 15px;
        margin-top: 18px;
        color: #6b7687;
        width: 600px;
        align-items: center;
      }

      &-item {
        +.gva-top-card-left-item {
          margin-top: 24px;
        }

        margin-top: 14px;
      }
    }

    &-right {
      height: 600px;
      width: 600px;
      margin-top: 28px;
    }
  }

  ::v-deep(.el-card__header) {
    padding: 0;
    border-bottom: none;
  }

  .card-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
  }

  .quick-entrance-title {
    height: 30px;
    font-size: 22px;
    color: #333;
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .quick-entrance-items {
    @include flex-center;
    justify-content: center;
    text-align: center;
    color: #333;

    .quick-entrance-item {
      padding: 16px 28px;
      margin-top: -16px;
      margin-bottom: -16px;
      border-radius: 4px;
      transition: all 0.2s;

      &:hover {
        box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 0.55);
      }

      cursor: pointer;
      height: auto;
      text-align: center;

      // align-items: center;
      &-icon {
        width: 50px;
        height: 50px !important;
        border-radius: 8px;
        @include flex-center;
        justify-content: center;
        margin: 0 auto;

        i {
          font-size: 24px;
        }
      }

      p {
        margin-top: 10px;
      }
    }
  }

  .echart-box {
    padding: 14px;
  }
}

.dasboard-icon {
  font-size: 20px;
  color: rgb(85, 160, 248);
  width: 30px;
  height: 30px;
  margin-right: 10px;
  @include flex-center;
}

.flex-center {
  @include flex-center;
}

//小屏幕不显示右侧，将登陆框居中
@media (max-width: 750px) {
  .gva-card {
    padding: 20px 10px !important;

    .gva-top-card {
      height: auto;

      &-left {
        &-title {
          font-size: 20px !important;
        }

        &-rows {
          margin-top: 15px;
          align-items: center;
        }
      }

      &-right {
        display: none;
      }
    }

    .gva-middle-card {
      &-item {
        line-height: 20px;
      }
    }

    .dasboard-icon {
      font-size: 18px;
    }
  }
}
</style>
